import {useState,useMemo,useCallback} from 'react'

export default ()=>{

   let [num,setNum] = useState(0);
   let [otherNum,setOtherNum] = useState(0)

      function addNum(){

        console.log("重新计算")
      
        let res=0;

        for(let i=0;i<=num;i++){
            res+=i;
        }

         return 10;
     }  
     //
    // let res = addNum();
     /*useMemo(参数1，参数2)
       参数1：回调函数，该函数必须返回一个值(你要记录的值)
       参数2:依赖选项
     */
        let  res =  useMemo(()=>{
            return addNum();
      },[num])

   let handleClick=()=>{
     setNum(num+1);
   }
   let handleClick2=()=>{
    setOtherNum(otherNum+1);
  }

    return (
      <div>
        <h1>计算器：{num} -- 累加值：{res} </h1>
        <button onClick={handleClick}>点击+1</button>
        <hr></hr>
        <h1>other: {otherNum}</h1>
        <button onClick={handleClick2}>点击+1</button>
      </div>
    )

}